import React from 'react';
import { Row, Col, Card, Statistic, Button, Typography } from 'antd';
import { PictureOutlined, VideoCameraOutlined, ClockCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Title } = Typography;

const DashboardHome = () => {
  const navigate = useNavigate();

  return (
    <div className="dashboard-home">
      <Title level={2}>欢迎回来！</Title>
      
      <Row gutter={[24, 24]} className="stats-row">
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="本月处理图片"
              value={15}
              prefix={<PictureOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="本月处理视频"
              value={3}
              prefix={<VideoCameraOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="处理中任务"
              value={2}
              prefix={<ClockCircleOutlined />}
              valueStyle={{ color: '#fa8c16' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="成功率"
              value={98.5}
              suffix="%"
              prefix={<CheckCircleOutlined />}
              valueStyle={{ color: '#722ed1' }}
            />
          </Card>
        </Col>
      </Row>

      <Row gutter={[24, 24]} className="action-row">
        <Col xs={24} lg={12}>
          <Card title="快速开始" className="action-card">
            <p>上传图片或视频文件，开始去水印处理</p>
            <Button 
              type="primary" 
              size="large"
              onClick={() => navigate('/dashboard/upload')}
            >
              开始上传
            </Button>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="查看历史" className="action-card">
            <p>查看您的处理历史和结果</p>
            <Button 
              size="large"
              onClick={() => navigate('/dashboard/history')}
            >
              查看历史
            </Button>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default DashboardHome; 